<div class="card">
  <div class="card-header">
    <button type="button" id="addAdvBtn" class="btn btn-primary" data-toggle="modal"
      data-target="#modal-default">添加广告</button>
    <div class="card-tools">
      <div class="input-group input-group-md">
        <input type="text" class="form-control" id="keyword" placeholder="搜索关键字">
        <div id="searchBtn" class="input-group-append">
          <div class="btn btn-primary">
            <i class="fas fa-search"></i>
          </div>
        </div>
      </div>
    </div>

  </div>
  <div id="advTable">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th style="width: 10px">序号</th>
          <th>广告标题</th>
          <th>广告类型</th>
          <th>广告地址</th>
          <th>广告预览</th>
          <th>广告排序</th>
          <th>创建时间</th>
          <th>更新时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <% const {advLists} = data;%>
        <% advLists.forEach((item,index)=>{ %>
        <tr>
          <td><%= index + 1 %></td>
          <td><%= item.advTitle %></td>
          <td><%= item.advType %></td>
          <td><%= item.advHref %></td>
          <td><img src="http://127.0.0.1:8000<%= item.advHref %>" alt="" height="80"></td>
          <td><%= item.advOrder %></td>
          <td><%= item.addTime %></td>
          <td><%= item.updateTime %></td>
          <td>
            <button type="button" class="btn btn-danger btn-sm btn-delete" data-id="<%= item._id %>">删除</button>
            <button type="button" class="btn btn-danger btn-sm btn-update" data-target="#modal-update"
              data-toggle="modal" data-id="<%= item._id %>">更新</button>

          </td>
        </tr>
        <% }) %>
      </tbody>
    </table>
    <div class="page" style="display: flex;" id="page">
      <% for(var i = 0;i < data.advCount;i++){%>
        <span
              style="width: 30px;height: 30px;background-color: yellowgreen;margin-right: 20px;text-align: center;line-height: 30px;"
              data-pageNo="<%= i+1 %>"><%= i+1 %></span>
        <% } %>
    </div>
  </div>
</div>
<!-- 添加广告弹窗 -->
<div class="modal fade show" id="modal-default" style="display: none; padding-right: 17px;" aria-modal="true"
  role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">添加广告</h4>
        <button type="button" id="addClose" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <form name="advForm" class="form-horizontal">
          <div class="card-body">
            <div class="form-group row">
              <label class="col-sm-2 col-form-label" for="advTitle">标题：</label>
              <div class="col-sm-10">
                <input id="advTitle" name="advTitle" type="text" class="form-control" placeholder="请输入广告标题">
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label" for="advType">类别:</label>
              <div class="col-sm-10">
                <select name="advType" id="advType" class="form-control">
                  <option value="1">轮播图广告</option>
                  <option value="2">轮播图底部广告</option>
                  <option value="3">热门回收广告</option>
                  <option value="4">优品精选广告</option>
                </select>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label" for="advHref">排序：</label>
              <div class="col-sm-10">
                <input id="advOrder" name="advOrder" type="number" class="form-control" placeholder="请输入广告排序，数字越大越靠前">
              </div>
            </div>


            <div class="form-group row">
              <label class="col-sm-2 col-form-label" for="advPic">图片：</label>
              <div class="col-sm-10 custom-file">
                <!--                            <input type="file" accept="image/png,image/gif,image/jpeg" multiple class="form-control" name="advPic" id="advPic">-->
                <input type="file" accept="image/png,image/gif,image/jpeg" class="form-control" name="advPic"
                  id="advPic">
              </div>
            </div>
            <div>
              <img style="display:none;" id="preImg" height="100">
            </div>

          </div>
        </form>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-default" id="adv-cancel" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" id="adv-save">添加</button>
        </div>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- 更新广告弹窗 -->
<div class="modal fade show" id="modal-update" style="display: none; padding-right: 17px;" aria-modal="true"
  role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">更新广告</h4>
        <button type="button" id="updateClose" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <form name="updateForm" class="form-horizontal">
          <div class="card-body">
            <div class="form-group row">
              <label class="col-sm-2 col-form-label" for="advTitle">标题：</label>
              <div class="col-sm-10">
                <input id="advTitle" name="advTitle" type="text" class="form-control" placeholder="请输入广告标题">
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label" for="advType">类别:</label>
              <div class="col-sm-10">
                <select name="advType" id="advType" class="form-control">
                  <option value="1">轮播图广告</option>
                  <option value="2">轮播图底部广告</option>
                  <option value="3">热门回收广告</option>
                  <option value="4">优品精选广告</option>
                </select>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label" for="advHref">排序：</label>
              <div class="col-sm-10">
                <input id="advOrder" name="advOrder" type="number" class="form-control" placeholder="请输入广告排序，数字越大越靠前">
              </div>
            </div>


            <div class="form-group row">
              <label class="col-sm-2 col-form-label" for="advPic">图片：</label>
              <div class="col-sm-10 custom-file">
                <!--                            <input type="file" accept="image/png,image/gif,image/jpeg" multiple class="form-control" name="advPic" id="advPic">-->
                <input type="file" accept="image/png,image/gif,image/jpeg" class="form-control" name="advPic"
                  id="advPic">
              </div>
            </div>
            <div>
              <img style="display:none;" id="preImg" height="100">
            </div>

          </div>
        </form>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-default" id="adv-cancel" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" id="adv-update">更新</button>
        </div>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>